<template>
    <view class="handbookDetail">
        <view class="nationalName">
            <view class="">{{dataDetail.title||''}}</view>
            <view>{{dataDetail.secondLevelTitle||''}}</view>
        </view>
        <!-- <view class="topImage">
            <view class="topBox">
                <view>XXX服务 </view>
                <view>
                    <span>专业团队</span>
                    <span>极速出签</span>
                    <span>智能申请</span>
                </view>
            </view>
        </view> -->
        <view class="cardBox">
            <view class="wicketBox">
                <view>办事指南</view>
            </view>

            <view class="typeBox">
                <view class="typeItem">
                    <view class="titleBox">
                        <view class="line"></view>
                        实施部门
                    </view>
                    <view>
                        <view>{{dataDetail.mattersNeedingAttention||''}}</view>
                    </view>

                    <view class="titleBox">
                        <view class="line"></view>
                        申请材料
                    </view>
                    <!-- {{dataDetail.needMaterials.split(',')||''}} -->
                    <view v-for="(item,index) in dataDetail.needMaterials" :key="index"
                        >
                        <view v-if="item.cardFile[0].response.data" style="color:#1F91F8" @click="gotoPage('/personalCenter/showPdf?pdfPath='+item.cardFile[0].response.data)" >{{item.cardName}}</view>
                        <view v-else>{{item.cardName}}</view>
                        <!-- <text @click="gotoPage('/personalCenter/showPdf?pdfPath='+item)"
                            style="padding-right:0rpx">{{item.split('/')[item.split('/').length-1]||''}}</text> -->
                        <!-- <text @click="shareFriend(item)">【模板转发】</text> -->
                    </view>

                    <!-- <view style="word-break: break-all;font-family: monospace;">
                        {{dataDetail.needMaterials||''}}
                    </view> -->

                    <view class="titleBox">
                        <view class="line"></view>
                        办理途径
                    </view>
                    <view>
                        <view selectable @longpress="onLongPress(dataDetail.webAddress)">
                            线上办理：<span style="color:#1F91F8;word-break: break-all;">{{dataDetail.webName||''}}【{{dataDetail.webAddress||''}}】</span>
                        </view>
                        <!-- <view>
                            线上办理：<span style="color:#1F91F8" @click="gotoPage('/personalCenter/showPdf?pdfPath='+dataDetail.webAddress+'&barTitle='+dataDetail.webName)">{{dataDetail.webName||''}}</span>
                        </view> -->
                        <view style="margin-top:20rpx">
                            线下办理：<span ><rich-text :nodes="dataDetail.downAddress"></rich-text></span>
                        </view>
                    </view>
                    <view class="titleBox">
                        <view class="line"></view>
                        承诺办结时限（工作日）
                    </view>
                    <view>{{dataDetail.processingTime||''}}</view>

                    <view class="titleBox">
                        <view class="line"></view>
                        咨询方式
                    </view>
                    <view>{{dataDetail.feeModel||''}}</view>

                    <view class="titleBox">
                        <view class="line"></view>
                        申请条件
                    </view>
                    <view>

                        <rich-text :nodes="dataDetail.handlingText"></rich-text>
                    </view>
                </view>
            </view>

            <!-- <view class="cardItem card1" v-for="(item,index) in listAll" :key="index" @click="clickNational(item)">
                <view class="imgBox">
                    <image :src="item.banner?item.banner.split(',')[0]:'../../static/scenery.png'"></image>
                </view>
                <view class="textBox">
                    <view class="titleText">{{item.countryChineseName||''}}</view>
                    <view class="money">￥{{setMoney(item)||''}}</view>
                </view>
            </view> -->
            <cc-bottom />
        </view>
        <!-- <view @click="gotoPage('/pages/login/login')">登录</view> -->
        <!-- <u-popup :show="showTypeBox" mode="bottom" @close="showTypeBox=false" @open="open">
        </u-popup> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            listAll: [
                {
                    label: '个人办事',
                    value: '0'
                },
                {
                    label: '企业办事',
                    value: '1'
                },
                // {
                //     label: '政策享受',
                //     value: '3'
                // },
            ],
            showTypeBox: false,
            nationalItem: {},

            list1: [
                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
            ],
            dataDetail: [],
            id: ''
        }
    },
    onLoad(options) {
        console.log(options);
        this.id = options.id
        this.getData()
    },
    onShareAppMessage() {
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        // return {
        //     title: "分享标题",
        //     imageUrl: "",//分享封面
        //     //如果有参数的情况可以写path
        //     path: "/myPackageF/pages/brand/brandSecondvideoSrc=" + this.videoSrc + "&series=" + this.series//此处链接为要分享的页面链接
        // };
    },
    methods: {
        onLongPress(value) {
            // 获取长按的文本内容
            // 执行复制操作
            uni.setClipboardData({
                data: value,
                success: () => {
                    uni.showToast({ title: '复制成功', duration: 2000 });
                },
                fail: () => {
                    uni.showToast({ title: '复制失败', icon: 'none', duration: 2000 });
                }
            });
        },
        shareFriend(value) {
            console.log(value);
            uni.downloadFile({
                url: value,
                success: (res) => {
                    console.log(res.tempFilePath);
                    uni.shareFileMessage({
                        filePath: res.tempFilePath,
                        fileName: value.split('/')[value.split('/').length - 1],
                        success: () => {
                            console.log(err, '分享文件成功');
                        },
                        fail: (err) => {
                            console.log(err, '分享文件失败');
                        }
                    });
                }
            })
        },
        lookPdf(item) {
            console.log(item);
            uni.downloadFile({
                url: item,
                success: res => {
                    console.log(res)
                    if (res.statusCode === 200) {
                        // 预览pdf文件
                        uni.openDocument({
                            filePath: res.tempFilePath,
                            showMenu: true, // 右上角菜单，可以进行分享保存pdf
                            success: function (file) {
                                console.log("文件打开成功", file)
                            }
                        })
                    }
                }
            })
        },
        gotoMapTo() {
            uni.openLocation({
                latitude: Number(40.846992),
                longitude: Number(111.762779),
                name: '内蒙古自治区呼和浩特市新城区成吉思汗大街街道政务服务中心'
            })
        },

        setMoney(item) {
            let number1 = item.standardMoney
            let number2 = item.fastMoney
            let number3 = item.groupMoney
            if (number1 <= number2 && number1 <= number3) {
                return number1;
            }
            if (number1 >= number2 && number2 <= number3) {
                return number2;
            }
            if (number3 <= number2 && number3 <= number1) {
                return number3;
            }
        },
        getData() {
            uni.showLoading({
                mask: true,
            })
            this.$asynApi.guideAllListDetail(this.id).then(val => {
                this.dataDetail = val.data
                if(this.dataDetail.needMaterials){
                    try {
                    this.dataDetail.needMaterials=JSON.parse(this.dataDetail.needMaterials)
                    } catch (error) {
                    this.dataDetail.needMaterials=[]
                    }

                }
                uni.hideLoading()
            })
        },

        // 跳转页面
        toPage(url, verifyToken) {
            if (verifyToken == 'verifyToken') {
                if (uni.getStorageSync('token')) {
                    uni.navigateTo({
                        url: url,
                    })
                }
                else {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    setTimeout(val => {
                        uni.clearStorage()
                        uni.navigateTo({
                            url: '/pages/login/login',
                        })
                    }, 2000)
                }
            }
        },

        gotoPage(url) {
            console.log(url);
            uni.navigateTo({
                url: url,
            })
        },
        gotoPageURl() {
            uni.navigateTo({
                url: "/pages/login/shop"
            })
        },
        // 点击国家
        changeNational(item) {
            console.log(item)
            this.nationalItem = item
        }
    },
}
</script>

<style lang="scss" scoped>
.status-bar {
    height: var(--status-bar-height);
    width: 100%;
}
.handbookDetail {
    // background-color: #fff;
    background: url("../static/handbookDetail.png") no-repeat top;
    background-size: 100% 100%;
    // background-color: #095be8;
    .nationalName {
        // position: absolute;
        z-index: 10;
        color: rgb(0, 0, 0);
        padding: 40rpx 40rpx 0 40rpx;
        left: 0rpx;
        // width: 100%;
        // text-align: center;
        span {
            font-family: cursive;
        }
        view:nth-child(1) {
            font-weight: 600;
            font-size: 38rpx;
            font-style: italic;
        }
        view:nth-child(2) {
            font-weight: 500;
            font-size: 28rpx;
            margin-top: 20rpx;
        }
    }
    .topImage {
        background-size: 100% 100%;
        width: 100vw;
        height: 350rpx;
        color: #fff;
        .topBox {
            padding: 50rpx;
            view:nth-child(1) {
                font-size: 60rpx;
                letter-spacing: 2rpx;
                font-weight: 600;
                line-height: 2;
            }
            span {
                margin-right: 10rpx;
            }
        }
        // padding: ;
    }
    .cardBox {
        width: calc(100% - 80rpx);
        margin: 0 auto;
        padding: 0rpx 20rpx 20rpx 20rpx;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        color: #555;
        font-size: 32rpx;
        letter-spacing: 2rpx;
        position: relative;
        // top: -40rpx;
        border-radius: 40rpx 40rpx 0 0;
        // background-color: #fff;
        overflow: hidden;
        // width: calc(100% - 40rpx);

        .kongKim {
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            box-shadow: 0rpx 0rpx 20rpx 5rpx rgb(212, 212, 212);
            border-radius: 30rpx;
            padding: 20rpx 20rpx;
            .itemBox {
                text-align: center;
                color: #000;
                font-size: 24rpx;
                image {
                    width: 70rpx;
                    height: 70rpx;
                    margin-bottom: 10rpx;
                }
            }
        }
        .wicketBox {
            background-image: url("../static/guideTitle.png");
            background-size: 100% 100%;
            padding: 30rpx 50rpx 50rpx 30rpx;
            // border-radius: 30rpx;
            margin-top: 30rpx;
            view:nth-child(1) {
                font-size: 36rpx;
                font-weight: 600;
                color: #fff;
                // text-shadow: 0rpx 5rpx 5rpx #40d9ff;
            }
            view:nth-child(2) {
                background-color: #ffd75c;
                font-size: 22rpx;
                padding: 5rpx 10rpx;
                font-weight: 600;
                color: #095be8;
                width: fit-content;
                border-radius: 5rpx;
                margin-top: 10rpx;
                // text-shadow: 0rpx 5rpx 5rpx #40D9FF;
            }
        }
        .highFrequency {
            display: flex;
            justify-content: space-between;
            margin-top: 40rpx;
            view:nth-child(1) {
                font-size: 30rpx;
                color: #000;
                font-weight: 600;
            }
            view:nth-child(2) {
                font-size: 24rpx;
                color: #2a5eec;
                display: flex;
                align-items: center;
                image {
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
        .cardItem {
            border-radius: 15rpx;
            float: left;
            line-height: 1;
            background-size: 100% 100%;
            width: calc(50% - 45rpx);
            margin: 20rpx 20rpx;
            box-shadow: 0rpx 4rpx 15rpx 3rpx rgba(208, 207, 207, 0.281);
            border: #fff 2rpx solid;
            // margin-bottom: 80rpx;
            overflow: hidden;
            .imgBox {
                width: 100%;
                height: 150rpx;
                // display: flex;
                // justify-content: center;
                // align-items: center;
                // background-color: #447efaa8;
                // border-radius: 50%;
                image {
                    border-radius: 15rpx 15rpx 0 0;
                    width: 100%;
                    height: 100%;
                }
            }
            .textBox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15rpx 20rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #000;
                .titleText {
                    overflow: hidden;
                    /* 文本超出时，显示省略标记 */
                    text-overflow: ellipsis;
                    /* 弹性伸缩盒子模型 */
                    display: -webkit-box;
                    /* 子元素呈现3行 */
                    -webkit-line-clamp: 1;
                    /* 子元素排列方式为垂直 */
                    -webkit-box-orient: vertical;
                }
                .money {
                    color: #ff3700;
                }
            }
        }
    }
    .typeBox {
        padding: 20rpx 30rpx 1rpx 30rpx;
        // text-align: center;
        position: relative;
        top: -50rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        margin-top: 20rpx;
        .typeItem {
            padding: 0rpx 10rpx 40rpx 10rpx;
            // margin-bottom: 25rpx;
            background-color: #fff;
            font-size: 26rpx;
            border-radius: 10rpx;
            border-bottom: 1rpx solid rgb(233, 233, 233);
            image {
                width: 72rpx;
                height: 70rpx;
            }
            .titleBox {
                margin: 60rpx 0 0 0;
                line-height: 2.5;
                .line {
                    width: 80rpx;
                    height: 8rpx;
                    background-color: #5390e9;
                    margin-bottom: 5rpx;
                }
                color: #5390e9;
                // width: calc(100% - 76rpx - 200rpx);
                font-size: 32rpx;
                font-weight: 600;
            }
        }
    }
}
/deep/ .u-swiper__wrapper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
}

/deep/ .u-swiper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    position: relative;
    background-color: transparent !important;
}
/deep/ .u-swiper__wrapper__item__wrapper__image {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    width: 100vw !important;
    image {
        width: 100vw !important;
        border-radius: 0rpx !important;
        height: calc(100vw * 1080 / 1920) !important;
    }
}
</style>